<template>
  <div>
    <van-tabs v-model="active" sticky>
      <van-tab title="当前订单">
        <div class="orders-all" v-if="ordersOn">
          <van-list
            v-model="loadingOn"
            :finished="finishedOn"
            finished-text="没有更多了"
            :error.sync="errorOn"
            error-text="请求失败，点击重新加载"
            @load="onLoadOrdersOn"
          >
            <div class="noworders" v-for="(item, index) in ordersOn" :key="index">
              <card-order :order="item" :type="'now'"></card-order>
            </div>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="历史订单">
        <div v-if="ordersClose" class="orders-all">
          <van-list
            v-model="loadingClose"
            :finished="finishedClose"
            finished-text="没有更多了"
            :error.sync="errorClose"
            error-text="请求失败，点击重新加载"
            @load="onLoadOrdersClose"
          >
            <div class="noworders" v-for="(item,index) in ordersClose" :key="index">
              <card-order :order="item" :type="'old'"></card-order>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Tab, Tabs, List, Cell, Toast } from 'vant'
import CardOrder from '../../components/card-order/index'

export default {
  name: 'orders',
  components: {
    CardOrder,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [List.name]: List,
    [Cell.name]: Cell,
    [Toast.name]: Toast,
    [CardOrder.name]: CardOrder
  },
  data () {
    return {
      active: 0,
      ordersOn: [],
      ordersClose: [],
      loadingOn: false,
      finishedOn: false,
      errorOn: false,
      pageOn: 1,
      loadingClose: false,
      finishedClose: false,
      pageClose: 1,
      errorClose: false
    }
  },
  async mounted () {
    this.setActiveTab(2)
  },
  async activated () {
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    ...mapMutations({
      setActiveTab: 'tabbar/setActiveTab'
    }),
    async getOrders (page, result) {
      try {
        const { data } = await this.$api.bet.orderList({ page: page, result: result })
        if (data.code === 200) {
          console.log(data.data)
          return data.data
        } else {
          // error
          if (result === 0) {
            this.errorOn = true
          } else {
            this.errorClose = true
          }
        }
      } catch (e) {
        // error
        if (result === 0) {
          this.errorOn = true
        } else {
          this.errorClose = true
        }
      }
    },
    async onLoadOrdersOn () {
      console.log('pageOn=' + this.pageOn)
      let data = await this.getOrders(this.pageOn, 0)
      console.log(data)
      this.loadingOn = false
      if (this.pageOn > 1) {
        this.ordersOn = [...this.ordersOn, ...data.data]
      } else {
        this.ordersOn = data.data
      }
      // 如果当前页数 = 总页数，则已经没有数据
      if (parseInt(data.total_pages) <= this.pageOn) {
        this.finishedOn = true
      }
      this.pageOn = this.pageOn + 1
    },
    async onLoadOrdersClose () {
      console.log('pageClose=' + this.pageClose)
      let data = await this.getOrders(this.pageClose, 1)
      this.loadingClose = false
      if (this.pageClose > 1) {
        this.ordersClose = [...this.ordersClose, ...data.data]
      } else {
        this.ordersClose = data.data
      }
      // 如果当前页数 = 总页数，则已经没有数据
      if (data.total_pages <= this.pageClose) {
        this.finishedClose = true
      }
      this.pageClose = this.pageClose + 1
    }
  }
}
</script>

<style scoped lang="less">
  .noorders{
    background-color: white;
    text-align: center;
    margin-top: 50px;
    font-size: 15px;
  }
  .orders-all {
    margin-bottom: 50px;
    background-color: #eae3e34f;
    font-size: 14px;
    height: 100%;
    .noworders {
      margin: 10px 0;
      padding: 15px;
      background-color: white;
    }
  }
</style>
